<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>企业风险提示</title>
  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="./plugins/bootstrap/css/bootstrap.css">
  <link rel="stylesheet" href="./css/main.css">
  <style>
    .table tbody td.border-left {
      border-right: 1px solid #dfdfdf;
      font-size: 14px;
      color: #333333;
      font-weight: bold;
    }

    .table tbody .tj-tr {
      background: #FFF6D9;
    }
    .notice {
      font-size: 14px;
      color: #666666;
    }
  </style>
</head>

<body>
  <div class="content">
    <h5 class="content-title">股权质押</h5>
    <div class="row">
      <div class="col-md-7">
        <div class="box">
          <div class="box-header">
            <div class="header-title">公告披露大股东质押统计</div>
            <span class="unit">（万股）</span>
          </div>
          <div class="box-body">
            <table class="table table-borderless">
              <thead>
                <tr>
                  <th scope="col"></th>
                  <th scope="col">未解押股权质押数量</th>
                  <th scope="col">占总股本(%)</th>
                  <th scope="col">占其他持有的股份数(%)</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td class="border-left">云天化机关有限责任公司</td>
                  <td>32,235,43</td>
                  <td>12.35</td>
                  <td>32</td>
                </tr>
                <tr>
                  <td class="border-left">共青城帮米投资合伙企业（有限合伙）</td>
                  <td>32,235,43</td>
                  <td>12.35</td>
                  <td>32</td>
                </tr>
                <tr class="tj-tr">
                  <td class="border-left">合计</td>
                  <td>32,235,43</td>
                  <td>12.35</td>
                  <td>32</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        <div class="box">
          <div class="box-header">
            <div class="header-title">中登披露全部质押数据统计</div>
            <span class="unit">（万股）</span>
          </div>
          <div class="box-body">
            <table class="table">
              <thead>
                <tr>
                  <th>股权质押总数</th>
                  <td>56,346.08</td>
                </tr>
                <tr>
                  <th>占A股合计比</th>
                  <td>13.65%</td>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td style='padding-left:20px;background-color: #BDD8E9;'>其中：无限售股份质押</td>
                  <td>34,444</td>
                </tr>
                <tr>
                  <td style='padding-left:20px;background-color: #BDD8E9;'>占无限售股份总量比</td>
                  <td>12</td>
                </tr>
                <tr>
                  <td style='padding-left:20px;background-color: #BDD8E9;'>其中有限售股份质押</td>
                  <td>3,345</td>
                </tr>
                <tr>
                  <td style='padding-left:20px;background-color: #BDD8E9;'>占有限售股份总量比</td>
                  <td>43</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
      <div class="col-md-5">
        <div class="box">
          <div class="box-header">
            <div class="header-title">质押比例走势</div>
          </div>
          <div class="box-body">
            <div class="tabs-wrap clearfix">
              <ul class="nav-tabs clearfix" style="float:right">
                <li class="nav-item active">
                  公告公布
                </li>
                <li class="nav-item">
                  中登公布
                </li>
              </ul>
            </div>
            <div class="chart" id="line" style="height:446px"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col">
        <div class="box">
          <div class="box-body clearfix">
            <ul class="nav-tabs clearfix">
              <li class="nav-item active">
                未解押质明细
              </li>
              <li class="nav-item">
                全部股票质押明细
              </li>
            </ul>
            <table class="table table-borderless">
              <thead>
                <tr>
                  <th scope="col">公告日期</th>
                  <th scope="col">股东名称</th>
                  <th scope="col">质押方</th>
                  <th scope="col">质押方类型</th>
                  <th scope="col">质押股数(万股)</th>
                  <th scope="col">质押起始日期</th>
                  <th scope="col">质押起始日期</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>2021-01-01</td>
                  <td>云天化机关有限责任公司</td>
                  <td>中国农业银行昆明曼嘉园支行</td>
                  <td>银行</td>
                  <td>23000</td>
                  <td>2021-01-01</td>
                  <td>2021-01-01</td>
                </tr>
              </tbody>
            </table>
            <p class="notice">
              注：备注文字备注文字备注文字备注文字备注文字备注文字备注文字备注文字备注文字备注文字
            </p>
          </div>
        </div>
      </div>
    </div>

  </div>
  <script src="plugins/jquery/jquery.min.js"></script>
  <script src="js/echarts.js"></script>
  <script>
    $(function () {
      $('.nav-tabs li').on('click', function() {
        $(this).addClass('active').siblings().removeClass('active')
      })
      // 折线图
      var myChart = echarts.init(document.getElementById('line'))
      var colorList = ["#2B9DF8", '#FBB969']
      var xData = ['2020/01', '2020/02', '2020/03', '2020/04', '2020/05', '2020/06', '2020/07']
      var option = {
        legend: {
          icon: 'circle',
          bottom: '5%',
          right: 'center',
          itemWidth: 6,
          itemGap: 20,
          textStyle: {
            color: '#556677'
          }
        },
        tooltip: {
          trigger: 'axis',
          
          axisPointer: {
            lineStyle: {
              width: 1,
              color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [{
                      offset: 0,
                      color: '#2B9DF8' // 0% 处的颜色
                  },{
                      offset: 1,
                      color: '#2B9DF8' // 100% 处的颜色
                  }],
                  global: false // 缺省为 false
              }
            },
            label: {
              show: true,
              backgroundColor: '#fff',
              color: '#BDD8E9',
              borderColor: 'rgba(0,0,0,0)',
              shadowColor: 'rgba(0,0,0,0)',
              shadowOffsetY: 0
            },
            
          },
          backgroundColor: '#fff',
          textStyle: {
            color: '#5c6c7c'
          },
          padding: [10, 10],
          extraCssText: 'box-shadow: 1px 0 2px 0 rgba(163,163,163,0.5)'
        },
        grid: {
          top: '5%',
          bottom:'20%'
        },
        xAxis: [{
          type: 'category',
          data: xData,
          axisLine: { //  改变x轴颜色
            lineStyle: {
              color: '#DBDBDB 100%',
            }
          },
          axisTick: {
            show: false
          },
          axisLabel: { //  改变x轴字体颜色和大小
            textStyle: {
              color: "#dfdfdf",
              fontSize: 12
            },
          },
          splitLine: {
            show: false,
            lineStyle: {
              color: ['#DBDBDB 100%'],
              width: 1,
              type: 'solid'
            }
          },
          boundaryGap: false
        }],
        yAxis: [{
          type: 'value',
          max: 100,
          axisTick: {
            show: false
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: 'rgba(107,107,107,0.37)', //y轴颜色
            }
          },
          axisLabel: {
            formatter: '{value} %',
            textStyle: {
              color: "#4d4d4d",
              fontSize: 12
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: ['#ecf2f2'],
              width: 1,
              type: 'solid'
            }
          }
        }],
        series: [{
          name: '合计',
          type: 'line',
          data: [10, 10, 30, 12, 15, 3, 7],
          symbolSize: 1,
          symbol: 'circle',
          smooth: true,
          yAxisIndex: 0,
          showSymbol: false,
          lineStyle: {
            width: 2,
          },
          itemStyle: {
            normal: {
              color: colorList[0],
              borderColor: colorList[0]
            }
          }
        }, {
          name: '收盘价',
          type: 'line',
          data: [5, 12, 11, 14, 25, 16, 10],
          symbolSize: 1,
          symbol: 'circle',
          smooth: true,
          yAxisIndex: 0,
          showSymbol: false,
          lineStyle: {
            width: 2,
          },
          itemStyle: {
            normal: {
              color: colorList[1],
              borderColor: colorList[1]
            }
          }
        }]
      };

      myChart.setOption(option)
      // 把echart实例追加到最外层window上
      window.top.chartsList && window.top.chartsList.push(myChart)
    })
  </script>
</body>

</html>